<template>
  <div :id="props.id" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { exportExcel } from '/@/utils/common/fileDown';
import { messageFn } from '/@/store/utils';
import LuckyExcel from 'luckyexcel';


const props = withDefaults(defineProps<{
  id: string;
  column: any[];
  options?: any;
  customCellRightClickConfig?: any;
  defaultRowHeight?: number,
  defaultColWidth?: number
}>(),{
  options: null,
  customCellRightClickConfig: {},
  defaultRowHeight: 40,
  defaultColWidth: 100,
})

const isInit = computed(() => props.column?.length > 0)

const initData = reactive({
  celldata: [], //初始化使用的单元格数据
  config: {  // 设置格式
    rowlen: {}, 
    columnlen: {},
  },
  dataVerification: {},
  defaultRowHeight: props.defaultRowHeight,
  defaultColWidth: props.defaultColWidth,
})

// 表格总列数
const getRowCount = computed(() => {
  return luckysheet?.getSheetData()?.length ??  0
})

const getInitData = () => {
  props.column?.forEach((item, index) => {
    (initData.celldata as any[]).push({
      r: 0,
      c: index,
      v: {
        ct: { fa: 'General', t: 'g' },
        m: item.title,
        v: item.title,
        bg: '#d7d7d7',
        fs: 12
      }
    })

    if (item.width) initData.config.columnlen[index] = item.width
  })
}

// 设置列的验证条件
const setColumnVerify = (index: number, option: any) => {
  luckysheet.setDataVerification(option, {
    range: {
      row: [1, getRowCount.value],
      column: [index, index]
    }
  })
}

// 设置存在verifyOptions的项
const setVerify = () => {
  props.column?.forEach((item, index) => {
    if (item.verifyOptions && item.verifyOptions.type && item.verifyOptions.value1) {
      setColumnVerify(index, item.verifyOptions)
    }
  })
}

// 通过key来设置请求回来的下拉菜单
const setDropdownValue = (key: string, value: string) => {
  let valueIndex = 0
  const valueItem = props.column?.find((item, index) => {
    if (item.key === key) {
      valueIndex = index
      return true
    }
  })
  
  if (valueItem.verifyOptions && valueItem.verifyOptions.type) {
    valueItem.verifyOptions.value1 = value
    setColumnVerify(valueIndex, valueItem.verifyOptions)
  }
}

// 获取json数据
const getOptions = () => {
  return luckysheet.toJson()
}

// 导出数据
const downloadExcel = (fileName?: string) => {
  const data = window.luckysheet.getAllSheets()
  data[0]?.data?.map(item => {
    if (item) {
      item.forEach(v => {
        if (v?.ct?.fa === 'yyyy-MM-dd') {
          v.ct.fa = '@'
          v.ct.t = 's'
          v.v = v.m
        }
      })
    }
  })
  exportExcel(data, fileName || '下载', true) 
}

const importExcel = (file: any, transfromExcelData) => {
  const files = file.file
  let name = files.name
  let suffixArr = name.split('.'),
    suffix = suffixArr[suffixArr.length - 1]
  if (suffix != 'xlsx') {
    messageFn('error', '请选择xlsx文件')
    return
  }
  LuckyExcel.transformExcelToLucky(files, function (exportJson) {
    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      messageFn('error', '没有工作表')
      return
    }
    destroy()
    const excelData = exportJson.sheets.slice(0, 1)
    excelData[0].celldata?.forEach(item => {
      if (item && item.v?.ct?.fa === 'm/d/yy') {
        item.v.ct.fa = 'yyyy-MM-dd'
        item.v.ct.t = 'd'
      }
    })
    transfromExcelData && transfromExcelData(excelData)
    create(excelData) 
  })
}

// 销毁元素
const destroy = () => {
  luckysheet?.destroy()
}

// 初始化数据
if (isInit.value) {
  getInitData()
}

const transToData = () => {
  // const data = window.luckysheet.getSheetData()
  // data?.map(item => {
  //   if (item) {
  //     item.forEach(v => {
  //       if (v?.ct?.fa === 'yyyy-dd-mm') {
  //         v.ct.fa = '@'
  //         v.ct.t = 's'
  //         v.v = v.m
  //       }
  //     })
  //   }
  // })
  

}

const create = (data?: any) => {
  luckysheet.create({
      container: props.id,
      title: '在线编辑Excel', // 设定表格名称
      lang: 'zh', // 设定表格语言
      showtoolbar: false, // 自定义工具栏
      showinfobar: false, // 是否显示顶部信息栏
      column: props?.column?.length || 60,
      showsheetbarConfig: {
        add: false, //新增sheet  
        menu: false, //sheet管理菜单
        sheet: false //sheet页显示
      }, // 自定义底部sheet页
      showtoolbarConfig: {
        undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
        paintFormat: true, //格式刷
        currencyFormat: true, //货币格式
        percentageFormat: true, //百分比格式
        numberDecrease: true, // '减少小数位数'
        numberIncrease: true, // '增加小数位数
        moreFormats: true, // '更多格式'
        font: false, // '字体'
        fontSize: true, // '字号大小'
        bold: true, // '粗体 (Ctrl+B)'
        italic: true, // '斜体 (Ctrl+I)'
        strikethrough: true, // '删除线 (Alt+Shift+5)'
        underline: true, // '下划线 (Alt+Shift+6)'
        textColor: true, // '文本颜色'
        fillColor: true, // '单元格颜色'
        border: true, // '边框'
        mergeCell: true, // '合并单元格'
        horizontalAlignMode: true, // '水平对齐方式'
        verticalAlignMode: true, // '垂直对齐方式'
        textWrapMode: true, // '换行方式'
        textRotateMode: false, // '文本旋转方式'
        image:true, // '插入图片'
        link:false, // '插入链接'
        chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
        postil:  false, //'批注'
        pivotTable: false,  //'数据透视表'
        function: false, // '公式'
        frozenMode: false, // '冻结方式'
        sortAndFilter: true, // '排序和筛选'
        conditionalFormat: true, // '条件格式'
        dataVerification: true, // '数据验证'
        splitColumn: false, // '分列'
        screenshot: false, // '截图'
        findAndReplace: false, // '查找替换'
        protection:false, // '工作表保护'
        print:false, // '打印'
      },
      cellRightClickConfig: {
        copy: true, // 复制
        copyAs: true, // 复制为
        paste: true, // 粘贴
        insertRow: true, // 插入行
        insertColumn: true, // 插入列
        deleteRow: true, // 删除选中行
        deleteColumn: true, // 删除选中列
        deleteCell: true, // 删除单元格
        hideRow: true, // 隐藏选中行和显示选中行
        hideColumn: true, // 隐藏选中列和显示选中列
        rowHeight: true, // 行高
        columnWidth: true, // 列宽
        clear: true, // 清除内容
        matrix: false, // 矩阵操作选区
        sort: false, // 排序选区
        filter: false, // 筛选选区
        chart: false, // 图表生成
        image: true, // 插入图片
        link: false, // 插入链接
        data: false, // 数据验证
        cellFormat: false, // 设置单元格格式
        ...props.customCellRightClickConfig
      },
      data: data || [
        {
          name: "excel", //工作表名称
          // frozen: {  // 冻结第一行
          //   type: 'row',
          // },
          ...initData
        }
      ]
  })
  transToData()
  if (isInit.value) {
    setVerify()
  }
}

onMounted(() => {  
  if (props.options) {
    luckysheet.create(props.options)
  }
})

defineExpose({
  setDropdownValue,  // 通过key来设置请求回来的下拉菜单
  create,
  getOptions,
  downloadExcel,
  destroy,
  getAllSheets: luckysheet.getAllSheets,
  importExcel
})
</script>

<style>
  #luckysheet-input-box {
    z-index: 15000;
  }
</style>